<div class="row">

    <div class="row col-md-12">
        <div class="row" ng-if="errorMessage != null">
            <div class="alert alert-danger">{{errorMessage}}</div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">New User</div>
            <div class="panel-body">
                <form role="form">
                    <div class="form-group">
                        <label for="header">Name</label>
                        <input type="text" class="form-control" id="name" placeholder="User Name" required ng-model="user.name">
                    </div>
                    <div class="form-group">
                        <label for="body">Age</label>
                        <textarea class="form-control" id="age" placeholder="User Age"
                                  rows="3" style="resize: none" required ng-model="user.age"></textarea>
                    </div>
                    <a class="btn btn-default" ng-click="putCualUser()">Put user</a>
                </form>
            </div>
        </div>
    </div>

    <div class="row col-md-12">
        <div class="panel panel-default">
            <div class="panel-body">
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="userFilter" class="col-sm-2 control-label">Filter:</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="userFilter" placeholder="Filter users..." ng-model="query">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="row col-md-12">
        <table class="table table-hover table-striped table-condensed">
            <thead>
                <th>Id</th>
                <th>Name</th>
                <th>Age</th>
                <th></th>
            </thead>
            <tbody>
                <tr ng-repeat="user in users | filter:query">
                    <td>{{user.id}}</td>
                    <td>{{user.name}}</td>
                    <td>{{user.age}}<td>
                    <td>
                        <button type="button" class="btn btn-danger btn-xs" ng-click="delCualUser(user.id)">Delete <span class="glyphicon glyphicon-remove"></span></button>
                    <td>
                </tr>
            </tbody>
        </table>
    </div>
</div>